<template>
  <div>
    <router-view></router-view>
    <van-tabbar v-model="active"
                active-color="#09BB07"
                inactive-color="#cdcdcd"
    >
      <van-tabbar-item  to="/chat">
        <span >微信</span>
        <van-icon
          class-prefix='icon'
          slot="icon"
          slot-scope="props"
          :class="props.active ? chat.active : chat.inactive"></van-icon>
      </van-tabbar-item>
      <van-tabbar-item to="/address">
        <span>通讯录</span>
        <van-icon
          slot="icon"
          slot-scope="props"
          :class="props.active ? address.active : address.inactive"
        ></van-icon>
      </van-tabbar-item>
      <van-tabbar-item to="/found">
        <span>发现</span>
        <van-icon
          slot="icon"
          slot-scope="props"
          :class="props.active ? found.active : found.inactive"
        ></van-icon>
      </van-tabbar-item>
      <van-tabbar-item to="/mine">
        <span>我</span>
        <van-icon
          slot="icon"
          slot-scope="props"
          :class="props.active ? mine.active : mine.inactive"
        ></van-icon>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
    export default {
      data() {
        return {
          active: -1,
          chat: {
            active: 'iconfont icon_chat_open',
            inactive: 'iconfont icon_chat_close'
          },
          address: {
            active: 'iconfont icon_address_open',
            inactive: 'iconfont icon_address_close'
          },
          found: {
            active: 'iconfont icon_found_open',
            inactive: 'iconfont icon_found_close'
          },
          mine: {
            active: 'iconfont icon_mine_open',
            inactive: 'iconfont icon_mine_close'
          }
        }
      },
      methods: {
        //判断哪个标签选中
        tabbarChecked:function () {
          switch(this.$route.path) {
            case '/chat/chat':
              this.active=0;
              break;
            case '/address/address':
              this.active=1;
              break;
            case '/found/found':
              this.active=2;
              break;
            case '/mine/mine':
              this.active=3;
              break;
            default:
              this.active=0;
          }
        }
      },
      mounted () {
        this.tabbarChecked();
      }
    }
</script>

<style scoped>

</style>
